<template>
	<view class="">
		<view class="bigBoxSty ml-24 mr-24 mt-16" v-for="item in supplierList">
			<view @click="goDetail(item)">
				<view :class="{ flexSty:current == 1 || current == 2 || current == 3 || current == 4 }">
					<view class="flex-start pt-35 ml-24" style="align-items: center;">
						<image :src="getImageUrl(item.avatar)" mode="aspectFill" class="w-55 h-55" style="border-radius: 50%;"></image>
						<!-- <image src="../../../../../static/card/zh.png" mode="" class="w-30 h-20 ml-12"></image> -->
						<flag class="w-30 h-20 mr-4 ml-10" :country="item.country" />
						<span class="ml-12" style="max-width: 550rp x;">{{ item[plang('r_name')] }}</span>
						<view  v-if="current != 0"  class="add_flag  ml-12">
							{{ $t('专业代办') }}
						</view>
						<!-- <image src="../../../../../static/icon/professIcon (2).png" mode="aspectFill" class="w-110 h-30 ml-12"></image> -->
					</view> 
					<span v-if="current == 1" class="text-888 fz20 mr-24 mt-25">{{$t('待付款')}}</span>
					<span v-if="current == 2" class="text-888 fz20 mr-24 mt-25" style="color: #03C24F;">{{$t('进行中')}}</span>
					<span v-if="current == 3 && !item.repair_state" class="fz20 mr-24 mt-25" style="color: #03C24F;">{{$t('已完成')}}</span>
					<span v-if="current == 3 && item.repair_state == 3" class="fz20 mr-24 mt-25" style="color: #03C24F;">{{$t('售后成功')}}</span>
					<span v-if="current == 3 && item.repair_state == 2" class="fz20 mr-24 mt-25" style="color: #FF0000;">{{$t('售后失败')}}</span>
					<span v-if="current == 4 && item.repair_state == 1" class="fz20 mr-24 mt-25" style="color: #03C24F;">{{$t('售后中')}}</span> 
				</view>
				<view class="contentSty">
					<p class="text-010 fz24 font-bold ml-18">{{$t('服务内容')}}: {{ item[plang('service')] }}</p>
					<p class="mr-18"> <span class="text-888 fz20">{{$t('积分')}}</span> <span class="text-010 fz26 font-bold ml-15">{{ item.amount }}</span> </p>
				</view>
			</view>
			<view v-if="current == 1" class="between mt-16 pb-24">
				<p class="fz22 text-888 ml-24">{{$t('订单编号')}}: {{ item.on }}</p>
				<view class="goPaySty mr-24" @click="toPayValue(item)">
					{{$t('去支付')}}
				</view>
			</view>
			<view v-else-if="current == 2" class=" mt-16 pb-24">
				<view class="flex-end">
					<view class="afterSty" @click="goAfter(item)">
						{{$t('申请售后')}}
					</view>
					<view class="goPaySty mr-24" @click="confirmValue(item)">
						{{$t('确认结算')}}
					</view>
				</view>
				<p v-if="item.complete == 1" class="fz24 mt-16 mr-30" style="color: #03C24F;text-align: right;">服务{{$t('已完成')}}</p>
			</view>
			<view v-else-if="current == 3" class="between mt-16  pb-24">
				<p class="fz22 text-888 ml-24">{{$t('订单编号')}}: {{ item.on }}</p>
				<view v-if="!item.evaluate" class="">
					<view class="evaluteSty" @click="goEval(item)">
						{{$t('评价')}}
					</view>
				</view>
				<view v-else class="">
					<p class="fz22 font-bold mr-20" style="color: #FF6A00;">{{$t('已评价')}}</p>
				</view>
			</view>
			<view v-else-if="current == 4 && item.repair_state != 1" class="flex-end mt-16 pb-24">
				<view class="afterSty mr-24" @click="goAfterDetail(item)">
					{{$t('查看详情')}}
				</view> 
			</view>
			<view v-if="current == 3" class="">
				<view class="ml-24 mr-24" style="border-bottom: 1rpx solid #f0f0f0;">
					<view class="between mt-35">
						<p class="fz24 text-888">{{$t('订单时间')}}</p>
						<p class="fz24 text-010">{{item.create_time}}</p>
					</view>
					<!-- <view v-if="item.evaluate" class="between mt-25">
						<p class="fz24 text-888">{{$t('用户')}}评价</p>
						<view class="flex-start ml-34 mt-15">
							<view class="" v-for="(it, ind) in scoreList">
								<image v-if="it.num <= item.score" class="ml-8 w-25 h-25"
									src="/static/img/starBright.png"></image>
								<image v-else class="ml-8 w-25 h-25" src="/static/img/starDark.png"></image>
							</view>
						</view>
					</view> -->
					<view v-if="item.repair_state == 3" class="">
						<view class="between mt-25">
							<p class="fz24 text-888">{{$t('付费比例')}}</p>
							<p class="fz24 text-010">{{ item.compensation }}%</p>
						</view>
						<view class="between mt-25">
							<p class="fz24 text-888">{{$t('返回积分')}}</p>
							<p class="fz24 text-010">{{ (item.amount * (100 - item.compensation)) / 100 }}</p>
						</view>
					</view>
					<view v-if="item.repair_state == 2" class="">
						<view class="between mt-25">
							<p class="fz24 text-888">{{$t('付费比例')}}</p>
							<p class="fz24 text-010">100%</p>
						</view>
						<view class="between mt-25">
							<p class="fz24 text-888">{{$t('返回积分')}}</p>
							<p class="fz24 text-010">0</p>
						</view>
					</view>
					<view class="between mt-25 mb-30">
						<p class="fz24 text-888">{{$t('订单编号')}}</p>
						<p class="fz24 text-010">{{ item.on }}</p>
					</view>
				</view>
			</view>
		</view>
		<u-modal :confirm-text="$t('确定')"  :cancel-text ="$t('取消')" class="modalSty" v-model="orderModal" :content="$t('是否确认支付') + '?'" :showCancelButton="true" @cancel="orderModal = false" @confirm="toPay(item)" :title="$t('提示')"></u-modal>
		<u-modal  :confirm-text="$t('确定')" :cancel-text ="$t('取消')" class="modalSty" v-model="confirmModal" :content="$t('是否确认结算') + '?'" :showCancelButton="true" @cancel="orderModal = false" @confirm="confirmPay(item)" :title="$t('提示')"></u-modal>
	</view>
</template>

<script>
import { payOrder, settlement } from '@/api/basic.js'
	export default {
		props: ["current", "supplierList"],
		data() {
			return {
				orderModal: false,
				confirmModal:false,
				payOn: '',
				confirmOn: '',
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			}
		},
		methods: {
			getImageUrl(url = '') {
				if(url.indexOf('://') > -1) {
					return url
				} else {
					return this.IMAGE_URL + url
				}
			},
			toPayValue(item) {
				this.payOn = item.on
				this.orderModal = true
			},
			toPay() {
				payOrder({on: this.payOn , user_id: uni.getStorageSync("user_id")}).then(res => {
					if(res.data.code == 200) {
						// uni.$u.toast(res.data.message)
						uni.$u.toast(res.data[this.plang('message')])
						uni.redirectTo({
							url: '/pages/tabbar/newUser/serviceOrder/index?order=1&statusBuy=2'
						})
					} else if(res.data.code == 201) {
						uni.showToast({
							title: this.$t('积分不足，请充值积分'),
							icon: "none",
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/vip/scorePoint',
								webview: 'zWebView'
							})
						}, 500)
					} else {
						// uni.$u.toast(res.data.message)
						uni.$u.toast(res.data[this.plang('message')])
					}
				})
			},
			confirmValue(item) {
				this.confirmOn = item.on
				this.confirmModal = true
			},
			confirmPay() {
				settlement({on: this.confirmOn , user_id: uni.getStorageSync("user_id"), type: 2}).then(res => {
					if(res.data.code == 200) {
						// uni.$u.toast(res.data.message)
						uni.$u.toast(res.data[this.plang('message')])
						uni.redirectTo({
							url: '/pages/tabbar/newUser/serviceOrder/index?order=1&statusBuy=3'
						})
					} else {
						// uni.$u.toast(res.data.message)
						uni.$u.toast(res.data[this.plang('message')])
					}
				})
			},
			goAfter(item) { 
				uni.navigateTo({
					url: `/pages/tabbar/newUser/serviceOrder/reasonForAppeal?orderNo=${item.on}`
				})
			},
			goEval(item) {
				uni.navigateTo({
					url: `/pages/tabbar/newUser/serviceOrder/serviceEval?orderNo=${item.on}`
				})
			},
			goDetail(item) {
				
				uni.navigateTo({
					url: `/pages/tabbar/newUser/serviceOrder/customInfo?type=2&serviceUser=true&orderNo=${item.on}`
				})
			},
			goAfterDetail(item) {
				uni.navigateTo({
					url: `/pages/tabbar/newUser/serviceOrder/afterDetailInfo?orderNo=${item.on}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	.bigBoxSty {
		// width: 100%;
		min-height: 250rpx;
		background-color: #fff;
		border-radius: 26rpx;
		.contentSty {
			background: linear-gradient(113.85deg, #EEF6FF -2.69%, rgba(255, 255, 255, 0) 47.5%);
			height: 104rpx;
			margin-left: 24rpx;
			margin-right: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
			border-radius: 26rpx;
		}
		.goPaySty {
			width: 228rpx;
			height: 52rpx;
			border-radius: 8rpx;
			background-color: #007AFF;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			line-height: 52rpx;
			letter-spacing: 0%;
			color: #fff;
			text-align: center;
			margin-left: 28rpx;
		}
		.afterSty {
			// width: 228rpx;
			height: 52rpx;
			border-radius: 8rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			line-height: 52rpx;
			color: #0E0E0E;
			border: 1rpx solid #D8D8D8;
			text-align: center;
		}
		.flexSty {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.evaluteSty {
			width: 140rpx;
			height: 52rpx;
			border-radius: 8rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			line-height: 52rpx;
			color: #FF6A00;
			border: 1rpx solid #FF6A00;
			text-align: center;
			margin-left: 12rpx;
			margin-right: 12rpx;
		}
	}
		.modalSty {
			text-align: center;
		}
		.add_flag{
			font-size: 20rpx;
			color: #fff;
			line-height: 1;
			text-align: center;
			padding: 6rpx 10rpx;
			border-radius: 500rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			box-shadow: -4px 5px 6.5px 0px rgba(200, 251, 255, 0.46) inset, -2px -6px 9.9px 0px #71D0FF inset, 0px 4px 13.8px 0px #DEE1EF;

		}
</style>
